<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Multiple File Upload With Progress Bar - Web Developer Plus Demos</title>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/swfupload/swfupload.js"></script>
<script type="text/javascript" src="js/jquery.swfupload.js"></script>
<script type="text/javascript">

window.total = 0;
window.uploaded = 0;

$(function(){
	$('#swfupload-control').swfupload({
		upload_url: "upload-file.php",
		file_post_name: 'uploadfile',
		file_size_limit : "1024",
		file_types : "*.jpg;*.png;*.gif;*.pdf;",
		file_types_description : "Image files",
		file_upload_limit : 5,
		flash_url : "js/swfupload/swfupload.swf",
		button_image_url : 'js/swfupload/wdp_buttons_upload_114x29.png',
		button_width : 114,
		button_height : 29,
		button_placeholder : $('#button')[0],
		debug: false
	})
		.bind('fileQueued', function(event, file){
			var listitem='<li id="'+file.id+'" >'+
				'File: <em>'+file.name+'</em> ('+Math.round(file.size/1024)+' KB) <span class="progressvalue" ></span>'+
				'<div class="progressbar" ><div class="progress" ></div></div>'+
				'<p class="status" >Pending</p>'+
				'<span class="cancel" >&nbsp;</span>'+
				'</li>';
			$('#log').append(listitem);
			$('li#'+file.id+' .cancel').bind('click', function(){
				var swfu = $.swfupload.getInstance('#swfupload-control');
				swfu.cancelUpload(file.id);
				$('li#'+file.id).slideUp('fast');
			});
			// start the upload since it's queued
                       
			$(this).swfupload('startUpload');
		})
		.bind('fileQueueError', function(event, file, errorCode, message){
			alert('Size of the file '+file.name+' is greater than limit');
		})
		.bind('fileDialogComplete', function(event, numFilesSelected, numFilesQueued){
			$('#queuestatus').text('Files Selected: '+numFilesSelected+' / Queued Files: '+numFilesQueued);
                        window.total = numFilesSelected;
		})
		.bind('uploadStart', function(event, file){
                          var swfu = $.swfupload.getInstance('#swfupload-control');
                         swfu.addPostParam("company_name", $("#company_name").val());
			$('#log li#'+file.id).find('p.status').text('Uploading...');
			$('#log li#'+file.id).find('span.progressvalue').text('0%');
			$('#log li#'+file.id).find('span.cancel').hide();
		})
		.bind('uploadProgress', function(event, file, bytesLoaded){
			//Show Progress
			var percentage=Math.round((bytesLoaded/file.size)*100);
			$('#log li#'+file.id).find('div.progress').css('width', percentage+'%');
			$('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
		})
		.bind('uploadSuccess', function(event, file, serverData){
			var item=$('#log li#'+file.id);
			item.find('div.progress').css('width', '100%');
			item.find('span.progressvalue').text('100%');
			var pathtofile='<a href="uploads/'+file.name+'" target="_blank" >view &raquo;</a>';
			item.addClass('success').find('p.status').html('Done!!! | '+pathtofile);
		})
		.bind('uploadComplete', function(event, file){
			// upload has completed, try the next one in the queue
			$(this).swfupload('startUpload');
                        window.uploaded++;
                        if (window.uploaded == window.total)
                        {
                           //alert("Finish uploading all files");
                           $("#queuestatus").text("Finish uploading all files");
                           $("#log").text("");
                           $("#maintext").html("<h4 style='margin:100px;text-align:center'>We have received your information. We will response you very soon. Thank you!</h4>");
                           
                            //document.forms[0].reset();
                           //jQuery(":reset");
                           
                        }
		})
	
});	
    //var swfu = $.swfupload.getInstance('#swfupload-control');
       
function check()
   {
     //alert('abc');
      temp = jQuery("#company_name").val();
      temp = jQuery.trim(temp);
      if(temp.length ==0) {
        alert("Company name must not be empty");
        jQuery("#company_name").focus();
       return false;
      }
     temp = jQuery("#contact_name").val();
      temp = jQuery.trim(temp);
      if(temp.length ==0) {
        alert("Contact name must not be empty");
          jQuery("#contact_name").focus();
       return false;
      }

      temp = jQuery("#email").val();
      temp = jQuery.trim(temp);
      if(temp.length ==0) {
        
        alert("email cannot empty");
           jQuery("#email").focus();
        return false;
      }
     /*var files = jQuery(":file");
     var anyfile = false;
     for(i=0;  i<5; i++)
     {
         //alert(files[i].value);
         if (jQuery.trim(files[i].value).length != 0)
         {
             anyfile = true;
             break;
         }
     }
     if (!anyfile) {
       alert("You must choose at least one file!");
       return false;
    }*/
   }


</script>
<style type="text/css" >
#swfupload-control p{ margin:10px 5px; font-size:0.9em; }
#log{ margin:0; padding:0; width:500px;}
#log li{ list-style-position:inside; margin:2px; border:1px solid #ccc; padding:10px; font-size:12px; 
	font-family:Arial, Helvetica, sans-serif; color:#333; background:#fff; position:relative;}
#log li .progressbar{ border:1px solid #333; height:5px; background:#fff; }
#log li .progress{ background:#999; width:0%; height:5px; }
#log li p{ margin:0; line-height:18px; }
#log li.success{ border:1px solid #339933; background:#ccf9b9; }
#log li span.cancel{ position:absolute; top:5px; right:5px; width:20px; height:20px; 
	background:url('js/swfupload/cancel.png') no-repeat; cursor:pointer; }
</style>
</head>
<body  style="background:#E0E0E0"
>

   <div id="maintext">
	<h3>&raquo; Multiple File Upload With Progress Bar</h3>
  <form id="myform">
<table>
  <tr> 
   <td> Company Name </td> <td> <Input type="text"  name="company_name" id="company_name" /> </td>
 </tr>
    <tr> 
   <td> Contact Name </td> <td> <Input type="text"  name="contact_name" id="contact_name"/> </td>
 </tr>

 <tr> 
   <td> Contact email address </td> <td> <Input type="text"  name="email" id="email"/> </td>
 </tr>

  <tr> 
   <td> Contact phone number </td> <td> <Input type="text"  name="phone" id="phone"/> </td>
 </tr>

  <tr>
    <td colspan=2>
    Comment: <br/>
    <textarea cols=60 rows=4 name="comment" id ="comment">
    </textarea>
   </td>
   </tr>
  <tr>
   <td  colspan=2 align="left">
   <div id="swfupload-control" >

        <p> <b> Upload upto 5 files, each having maximum size of 1MB</b></p>
        <span  onmouseover=" check(); ">
        <input type="button" id="button"  onmouseover="alert(1)"/>
       </span>  
        <p id="queuestatus" ></p>
        <ol id="log"></ol>
      </div>

  </td>
  <td></td>
</tr>

</table>


</form>
</div>
</body>
</html>
